<template>
    <div class="hot-referral">
        <div class="headMould">
            <h3 class="headMouldIns">热门推荐</h3>
            <div class="changeBoxs">
                <div class="tabHeadBox clearfix">
                    <div class="tabHeadCont" v-bind:class="{tabHeadActive:activeText == '热搜排行'}" v-on:click="clickActive($event)">热搜排行</div>
                    <div class="tabHeadCont" v-bind:class="{tabHeadActive:activeText == '建站相关'}" v-on:click="clickActive($event)">建站相关</div>
                </div>
                <div class="tabChangeCont">
                    <div class="tabContItem clearfix">
                        <div class="tabContLis tabContLisL">
                            <ul>
                                <li class="tabLisText" v-for="hotLis in hotSearchLis" :key="hotLis.id">
                                    <a v-bind:href="hotLis.Url" v-bind:title="hotLis.title">{{hotLis.title}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tabContLis tabContLisR">
                            <ul>
                                <li class="tabLisText" v-for="creatLis in creatSiteLis" :key="creatLis.id">
                                    <a v-bind:href="creatLis.Url" v-bind:title="creatLis.title">{{creatLis.title}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <ol class="orderBox">
                        <li class="orderOne">1</li>
                        <li class="orderTwo">2</li>
                        <li class="orderThree">3</li>
                        <li class="orderFour">4</li>
                        <li class="orderFive">5</li>
                        <li class="orderSix">6</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/* 热门推荐(统一组件) */
export default {
  name: 'hotReferral',
  data: function () {
      return {
          activeText: '热搜排行',
          hotSearchLis: '',
          creatSiteLis: ''
      }
  },
  mounted () {
    this.$ajax.get('https://www.easy-mock.com/mock/590b372187cce4690feccdea/dongxin/hotReferral').then(response => {
        // success callback
    //    console.log(response.data)
        this.hotSearchLis = response.data.dataL
        this.creatSiteLis = response.data.dataR
    }, response => {
        // error callback
        alert('数据加载失败...')
    })
  },
  methods: {
    clickActive: function (ev){
        var eVal = ev.target.innerText
        var iLW = $('.tabContLis').width()
        this.activeText = eVal
        if(eVal == '热搜排行'){
            $('.tabContItem').css('left', 0)
        }else if(eVal == '建站相关'){
            $('.tabContItem').css('left', -iLW)
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
